<template>
	<view class="orderDetails_container">
		<!-- 地址 -->
		<view class="address display align-items" v-if="orderList.status>1">
			<image class="address_icon" src="../../../static/icon/address.png" mode=""></image>
			<view class="address_info ">
				<view class="address_name">{{orderList.consignee}}<text class="address_phone">{{orderList.mobile}}</text></view>
				<view class="address_details">{{orderList.province_name}}-{{orderList.city_name}}-{{orderList.county_name}}-{{orderList.address}}</view>
			</view>
		</view>
		<image class="address_line" src="../../../static/icon/address_line.png" mode="" v-if="orderList.status>1"></image>

		<!-- 待付款没有配送 start -->
		<view class="order_contant  display auto   align-items space-between " style="padding: 25rpx 0 10rpx 0;" v-if="orderList.status>2">
			<view class="order_delivery_left" style="width: 100%;">
				<view class="order_delivery_left_info">
					配送方式
					<text>{{orderList.delivery_name}}</text>
				</view>
				<view class="order_delivery_left_info display space-between align-items" style="margin-top: 20rpx;">
					<view>快递单号
						<text>{{orderList.waybill_id}}</text></view>
					<view class="order_delivery_see" @click="goLogistics()">查看物流</view>
				</view>
			</view>
		</view>
		<!-- 待付款没有配送 end -->
		<view class="order_contant  border radius10 auto" style="margin-top: 25rpx;">
			<view class="  display auto " v-for="(item,index) in orderList.goods" :key="index" :style="item===orderList.goods.length-1?'margin-bottom:20rpx;':''">
				<image class="order_contant_img" :src="imgUrl+item.goods_image"></image>
				<view class="order_contant_info">
					<view class="order_contant_title ellipsis_more ellipsis_more_2">{{item.goods_name}}</view>
					<view class="order_contant_number">X{{item.goods_num}}</view>
					<view class="order_contant_money">¥{{item.goods_price}}</view>
				</view>
			</view>

		</view>
		<!-- 商品总额之类的 -->
		<view class="order_contant   auto top border radius10">
			<view class="order_contant_details display space-between">
				<view>商品总额</view>
				<view>¥{{orderList.goods_amount}}</view>
			</view>
			<view class="order_contant_details display space-between">
				<view>物流运费</view>
				<view>{{orderList.postage}}</view>
			</view>
			<view class="order_contant_details order_contant_des border_bottom display space-between" v-if="orderList.score!=null">
				<view>积分抵扣</view>
				<view>¥{{orderList.score}}</view>
			</view>
			<view class="order_contant_details_money">合计：<text>¥{{orderList.order_amount}}</text></view>

		</view>
		<!-- 商品订单编号  -->
		<view class="order_contant order_contant_again  auto top border radius10" style="margin-bottom: 120rpx;">
			<view class="order_contant_details display align-items">
				<view class="order_contant_other_left">订单编号</view>
				<view class="order_contant_other_center">{{orderList.order_sn}}</view>
				<image class="order_contant_other_right" @tap.stop="copy(orderList.order_sn)" src="../../../static/icon/copy.png"
				 mode=""></image>
			</view>
			<view class="order_contant_details display align-items">
				<view class="order_contant_other_left">下单时间</view>
				<view class="order_contant_other_center">{{orderList.order_time}}</view>
			</view>
			<view class="order_contant_details display align-items" v-if="orderList.status==2||orderList.status==3||orderList.status==4">
				<view class="order_contant_other_left">支付方式</view>
				<view class="order_contant_other_center" v-if="orderList.pay_type=='amount'">余额支付</view>
				<view class="order_contant_other_center" v-else>微信支付</view>
			</view>
			<view class=" display align-items" style="margin-bottom: 25rpx;" v-if="orderList.status==2||orderList.status==3||orderList.status==4">
				<view class="order_contant_other_left">支付时间</view>
				<view class="order_contant_other_center">{{orderList.paid_time}}</view>
			</view>
		</view>
		<!-- 状态 -->
		<!-- 待付款 -->
		<view class="btn display space-between " v-if="orderList.status==1">
			<view class="back cancel  display align-items justify-content" @click="cancleOrder()">取消订单</view>
			<view class="display align-items justify-content" @click="goPay()">立即支付</view>
		</view>
		<!-- 待收货 -->
		<view class="btn display space-between " v-if="orderList.status==3">
			<view class="back cancel  display align-items justify-content"></view>
			<view class="display align-items justify-content" @click="orderReceive()">确认收货</view>
		</view>
		<is-login v-on:childClick='listenToClose' v-on:childClickAgain='listenToCloseAgain' v-if="isLogin==0"></is-login>
	</view>
</template>

<script>
	import checktime from '../../../util/formTime.js'
	import isLogin from '../../../components/isLogin.vue'
	export default {
		data() {
			return {
				id: 0,
				orderList: {},
				isLogin: 1,
				imgUrl: ''
			}
		},
		components: {
			isLogin,
		},
		onLoad(option) {
			this.imgUrl = this.$imgUrl
			if (!uni.getStorageSync('openid')) {
				this.isLogin = 0
			} else {
				var id = option.id
				this.id = id
				this.getOrderDetails()
			}
		},
		onPullDownRefresh() {
			uni.showToast({
				icon: 'loading',
				title: '加载中',
			});
			setTimeout(() => {
				this.getOrderDetails(() => {
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
			}, 1000)
		},
		methods: {
			copy: function(value) {
				uni.setClipboardData({
					data: value, // 要复制的文字
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功'
								});
							}
						});
					}
				});
			},
			getOrderDetails(callback) {
				let that = this
				var data = {
					openid: uni.getStorageSync('openid'),
					id: that.id
				}
				this.$myRequest.post(this.$api.order.getOrderInfo, data).then(res => {
					callback && callback()
					if (res.code == '200') {
						var orderList = res.data.data
						this.orderList = orderList
						this.orderList.order_time = checktime.changeTime(this.orderList.order_time)
						if (orderList.status == 2 || orderList.status == 3 || orderList.status == 4) {
							this.orderList.paid_time = checktime.changeTime(this.orderList.paid_time)
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			// 立即支付
			goPay(id) {
				let that = this
				var orderId = that.id
				uni.navigateTo({
					url: "../../shopCar/confirmOrder/index?orderId=" + orderId
				})
			},
			// 取消订单
			cancleOrder(id) {
				let that = this
				var data = {
					openid: uni.getStorageSync('openid'),
					id: that.id
				}
				uni.showModal({
					title: '提示',
					content: '是否取消该订单',
					success: function(res) {
						if (res.confirm) {
							that.$myRequest.post(that.$api.order.orderCancel, data).then(res => {
								if (res.code == '200') {
									uni.showToast({
										title: '取消成功',
										icon: "success",
										success() {
											setTimeout(function() {
												uni.navigateBack()
											}, 1500)
										}
									})
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									})
								}
							})
						} else if (res.cancel) {

						}
					}
				});
			},
			goLogistics() {
				let that = this
				var id = that.id
				uni.navigateTo({
					url: "./logistics?id=" + id
				})
			},
			orderReceive() {
				let that = this
				var data = {
					openid: uni.getStorageSync('openid'),
					id: that.id
				}
				uni.showModal({
					title: '提示',
					content: '是否确认收货',
					success: function(res) {
						if (res.confirm) {
							that.$myRequest.post(that.$api.order.orderReceive, data).then(res => {
								if (res.code == '200') {
									uni.showToast({
										title: '收货成功',
										icon: "success",
										success() {
											that.getOrderDetails()
										}
									})
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									})
								}
							})
						} else if (res.cancel) {

						}
					}
				});

			},
			listenToClose(msg) {
				this.isLogin = msg
			},
			listenToCloseAgain() {
				this.getOrderDetails()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.orderDetails_container {

		.address {
			padding: 28rpx 28rpx 0rpx 28rpx;

			.address_icon {
				width: 25rpx;
				height: 30rpx;
			}

			.address_info {
				margin-left: 18rpx;
				width: 650rpx;

				.address_name {
					color: #333;
					font-size: 26rpx;

					.address_phone {
						margin-left: 18rpx;
					}
				}

				.address_details {
					font-size: 24rpx;
					color: #666;
					margin-top: 5rpx;
				}
			}

		}

		.address_line {
			width: 100%;
			height: 4rpx;
		}

		.top {
			margin-top: 30rpx;
		}

		.bottom {
			margin-bottom: 25rpx;
		}

		.order_contant_again {
			padding: 28rpx 20rpx 0 20rpx !important;
		}

		.order_contant {
			width: 650rpx;
			padding: 28rpx 20rpx;

			//配送
			.order_delivery_left {
				font-size: 24rpx;
				color: #666666;
				margin-left: 28rpx;

				text {
					margin-left: 40rpx;
					font-size: 26rpx;
					color: #333333;
				}
			}

			.order_delivery_see {
				width: 116rpx;
				height: 34rpx;
				line-height: 34rpx;
				border: 1px solid #666666;
				border-radius: 17rpx;
				font-size: 20rpx;
				color: #666666;
				text-align: center;
			}

			//商品信息

			.order_contant_img {
				width: 156rpx;
				height: 156rpx;
			}

			.order_contant_info {
				width: 471rpx;
				margin-left: 21rpx;


				.order_contant_title {
					font-size: 26rpx;
					color: #333;
					height: 70rpx;
				}

				.order_contant_number {
					font-size: 25rpx;
					color: #666;
					text-align: right;
					margin-top: 18rpx;
				}

				.order_contant_money {
					font-size: 26rpx;
					color: #333;
					text-align: right;
					margin-top: 10rpx;
				}
			}

			// 數據信息
			.order_contant_details {
				font-size: 26rpx;
				color: #333;
				margin-bottom: 28rpx;


			}

			.order_contant_des {
				padding-bottom: 28rpx;
			}

			.order_contant_details_money {
				text-align: right;
				font-size: 28rpx;
				color: #333;

				text {
					font-size: 28rpx;
					color: #F21515;
				}
			}

			// 订单信息
			.order_contant_other_left {
				font-size: 26rpx;
				color: #333;
			}

			.order_contant_other_center {
				font-size: 26rpx;
				color: #666666;
				padding: 0 16rpx 0 42rpx;
			}

			.order_contant_other_right {
				width: 20rpx;
				height: 20rpx;
			}
		}

		.btn {

			border: 1px solid #E3E3EF;

			view {
				width: 50%;
				height: 100%;
			}

			.cancel {
				color: #666;
			}

		}
	}
</style>
